import React from 'react'
import { Col, Icon, Row, Select } from 'antd'
import '../../less/index.less'
import { convertContent } from '../../constant/lang-util'

const Option = Select.Option

class SelectStatus extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value: this.props.value,
      editable: false
    }
  }

  handleChange (value) {
    this.setState({value})
  }

  check () {
    this.setState({editable: false})
    if (this.props.onChange) {
      this.props.onChange(this.state.value)
    }
  }

  edit () {
    this.setState({editable: true})
  }

  render () {
    const {value, editable} = this.state
    const optionals = this.props.optionals
    return (
      <Row>
        <Col span={20}>
          {editable
            ? <Select defaultValue={value} style={{width: 175}} onChange={this.handleChange.bind(this)}>
              {
                optionals.map((optional, index) => {
                  return <Option value={optional} key={index}>{convertContent(optional)}</Option>
                })
                }
            </Select>
            : <span>{convertContent(value)}</span>
              }
        </Col>
        <Col span={2} offset={2}>
          {this.props.disable ? '' : editable ? <Icon type='check'
            className={this.props.operationIconClassName}
            onClick={this.check.bind(this)}
                  />
                  : <Icon
                    type='down'
                    onClick={this.edit.bind(this)}
                  />

          }
        </Col>
      </Row>
    )
  }
}

export default SelectStatus
